(function (doc, cssText) {
  var styleEl = doc.createElement("style");
  doc.getElementsByTagName("head")[0].appendChild(styleEl);
  if (styleEl.styleSheet) {
    if (!styleEl.styleSheet.disabled) {
      styleEl.styleSheet.cssText = cssText;
    }
  } else {
    try {
      styleEl.innerHTML = cssText;
    } catch (ignore) {
      styleEl.innerText = cssText;
    }
  }
}(document, ".group4 {\n" +
  "    padding: 10px;\n" +
  "}\n" +
  "\n" +
  ".group4 .group-item {\n" +
  "    display: inline-block;\n" +
  "    text-align: center;\n" +
  "    padding: 5px 10px 5px 10px;\n" +
  "    border: solid 1px #d9d9d9;\n" +
  "    position: relative;\n" +
  "}\n" +
  "\n" +
  ".group4 .group-item + .group-item {\n" +
  "    margin-left: 10px;\n" +
  "}\n" +
  "\n" +
  ".group4 .selected {\n" +
  "    border: solid 1px #b62639 !important;\n" +
  "}\n" +
  "\n" +
  ".group4 .group-item .sign {\n" +
  "    box-shadow: none;\n" +
  "    z-index: 10;\n" +
  "    margin-left: -20px;\n" +
  "    margin-top: -10px;\n" +
  "    position: absolute;\n" +
  "    width: 0;\n" +
  "    height: 0;\n" +
  "    right: 0;\n" +
  "    bottom: 0;\n" +
  "    border-top: 15px solid transparent;\n" +
  "    border-right: 15px solid #b62639;\n" +
  "}\n" +
  "\n" +
  ".group4 .group-item .check {\n" +
  "    right: 1px;\n" +
  "    bottom: -5px;\n" +
  "    position: absolute;\n" +
  "    z-index: 11;\n" +
  "    color: white;\n" +
  "}\n" +
  "\n" +
  ".group3 {\n" +
  "    display: inline-block;\n" +
  "    text-align: center;\n" +
  "    padding: 10px 10px 0 10px\n" +
  "}\n" +
  "\n" +
  ".group3 i {\n" +
  "    font-size: 16px;\n" +
  "    color: darkred\n" +
  "}\n" +
  "\n" +
  ".group3 span {\n" +
  "    color: #333333\n" +
  "}\n" +
  "\n" +
  ".group2 {\n" +
  "    margin: -1px 10px;\n" +
  "    border: solid 1px #d9d9d9;\n" +
  "}\n" +
  "\n" +
  ".group2 i {\n" +
  "    position: absolute;\n" +
  "    right: 20px;\n" +
  "    color: darkred;\n" +
  "}\n" +
  "\n" +
  ".group1 {\n" +
  "    flex-wrap: wrap;\n" +
  "}\n" +
  "\n" +
  ".group1 .select {\n" +
  "    min-width: 100px;\n" +
  "    word-break: keep-all;\n" +
  "    display: inline-block;\n" +
  "    line-height: normal;\n" +
  "}"));
APP.run(['$templateCache', function ($templateCache) {
  $templateCache.put('select-group1.html',
    '<div class="row group1" >\n' +
    '  <div class="col col-33 select" ng-repeat="item in selectGroup track by $index">\n' +
    '    <button class="button button-small button-assertive button-outline width-100" ng-bind="item.title||item"\n' +
    '            ng-click="doSelectGroup($index)"\n' +
    '            ng-class="{\'true\':\'active\'}[selectedIndex==$index]"></button>\n' +
    '  </div>\n' +
    '</div>\n' +
    '');
}]);
APP.run(['$templateCache', function ($templateCache) {
  $templateCache.put('select-group2.html',
    '<div class="padding group2" ng-repeat="item in selectGroup  track by $index"\n' +
    '     ng-click="doSelectGroup($index);">\n' +
    '  <span ng-bind="item.title||item"></span>\n' +
    '  <i class="icon ion-checkmark" ng-if="selectedIndex==$index"></i>\n' +
    '</div>\n' +
    '');
}]);
APP.run(['$templateCache', function ($templateCache) {
  $templateCache.put('select-group3.html',
    '<div class="padding">\n' +
    '\n' +
    '    <div ng-repeat="item in selectGroup track by $index" ng-click="doSelectGroup($index);"\n' +
    '         class="group3">\n' +
    '        <i class="icon"\n' +
    '           ng-class="{\'false\':\'ion-android-radio-button-off\',\'true\':\'ion-android-checkmark-circle\'}[selectedIndex==$index]"></i>\n' +
    '        <span ng-bind="item.title||item"></span>\n' +
    '    </div>\n' +
    '</div>\n' +
    '');
}]);
APP.run(['$templateCache', function ($templateCache) {
  $templateCache.put('select-group4.html',
    '<div class="group4">\n' +
    '    <div class="group-item" ng-repeat="item in selectGroup track by $index" ng-click="doSelectGroup($index);"\n' +
    '         ng-class="{\'true\':\'selected\'}[$index == selectedIndex]">\n' +
    '        <i class="sign" ng-if="selectedIndex==$index"></i>\n' +
    '        <i class="check icon ion-ios-checkmark-empty" ng-if="selectedIndex==$index"></i>\n' +
    '        <span ng-bind="item.title||item"></span>\n' +
    '    </div>\n' +
    '</div>\n' +
    '');
}]);
APP.directive('selectGroup', ['$state', '$ionicScrollDelegate', '$timeout',
  function ($state, $timeout) {
    return {
      restrict: 'E',
      replace: true,
      scope: {
        selectGroup: '=selectGroup',
        selectedIndex: '=selectedIndex',
        attrName: '@attrName',
        type: '@type'
      },
      template: '<ng:include src="template"/>',
      link: function (scope, element, attr, controller) {
        console.log(scope.selectGroup);
        if (!scope.type || scope.type < 1) {
          scope.type = 1
        }
        if (scope.attrName) {
          for (var i = 0; i < scope.selectGroup.length; i++) {
            scope.selectGroup[i].title = scope.selectGroup[i][scope.attrName];
          }
        }
        scope.template = "select-group" + scope.type + '.html';

        /**
         * 点击按钮选择方法
         * @param index
         */
        scope.doSelectGroup = function (index) {
          scope.selectedIndex = index;
        }


      }
    }
  }]);
